<template>
  <div class="aaaa">
    <p class="count">{{timestart}}</p>
    <div id="wu" ref="progresss" class="progress-wu">
      <div ref="progressWidths" class="progress">
        <div ref="globals" class="global"></div>
      </div>
    </div>
    <p class="count">{{timeend}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progressWidths: 0
    };
  },
  mounted() {
    this.getProgressOffsetWidth()
  },
  methods: {
    getProgressOffsetWidth() {
      this.progressWidths = document.getElementById('wu').offsetWidth
    }
  },
  props: {
    timestart: {
      type: String,
      default: "",
      required: true
    },
    timeend: {
      type: String,
      default: "",
      required: true
    },
    progresswidth: {
      type: Number,
      default: 0,
      required: true
    }
  },
  watch: {
    progresswidth: {
      handler() {
        let width = this.progresswidth * this.progressWidths;
        this.$refs.progressWidths.style.width = `${width}px`;
        this.$refs.globals.style.left = `${width}px`;
      },
      deep: true
    }
  }
};
</script>
<style>
.top-one .van-icon {
  font-size: 60px;
  width: 20%;
  color: #fff;
}
</style>

<style lang="scss" scoped>
.aaaa {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  .progress-wu {
    width: 720px;
    height: 12px;
    background: rgba(0, 0, 0, 0.3);
    .progress {
      width: 0;
      height: 12px;
      background: #ffcd32;
      position: relative;
      .global {
        position: absolute;
        box-sizing: border-box;
        width: 32px;
        top: -11px;
        left: 0;
        height: 32px;
        border: 6px solid #fff;
        border-radius: 50%;
        background: #ffcd32;
      }
    }
  }
  .count {
    color: #fff;
    width: 120px;
    text-align: center;
  }
}
</style>
